<template>
	<view class="container" v-if='WEBCONFIG&&WEBCONFIG.game_system'
		:style="'background-color:'+ WEBCONFIG.game_system.index_color +';'">
		<view class="header" :style="'background-image: url(' + WEBCONFIG.game_system.index_image + ');'">
			<uni-nav-bar status-bar :title="WEBCONFIG.web_name||'首页'" backgroundColor='transparent' :border='false'
				color="#2b2b2b"></uni-nav-bar>

			<view class="banner pl-4 pt-4">
				<swiper autoplay interval="2000" >
					<swiper-item class="rounded-5" v-for="(item,index) in  bannerList" :key='index'>
						<image class="image" :src='item.image'></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="flex flex-center mt-10">
			<image class="title" :src="WEBCONFIG.title_image"></image>
		</view>

		<view class="mt-6 p-4">
			<view class="game-item" v-for="(item,index) in WEBCONFIG.list"
				@click="playAudio();$page.open('/pages/game/level?types='+item.type)" :key="index">

				<image class="game-btn p-3" mode='aspectFit' :src="item.image">
				</image>
			</view>
		</view>

		<view v-if='jumpList.length>0'>
			<view v-if='showJump' class="jump  rounded-top-right-2 rounded-bottom-right-2 flex flex-row ">
				<view class="jump-applet">
					<view class=" flex flex-column p-2" v-for="(item,index) in jumpList" :key="index"
						@click="onJumpApplet(item)">
						<view class="jump-item p-1 rounded-3 flex flex-column flex-center">
							<image :src='item.image' class="item-image"></image>
							<view class="item-text">{{item.name}}</view>
						</view>
					</view>
				</view>
				<view class='flex flex-y-center' @click="showJump=false">
					<uni-icons type="left"></uni-icons>
				</view>
			</view>
			<view v-else class='jump-1 flex flex-y-center rounded-top-right-2 rounded-bottom-right-2'
				@click="showJump=true">
				<uni-icons type="right"></uni-icons>
			</view>
		</view>

		<!-- #ifdef MP-WEIXIN -->
		<view class="ad" v-if="WEBCONFIG.weixin_video_status && WEBCONFIG.weixin_video_status == 1">
			<ad :unit-id="WEBCONFIG.weixin_video_ad_id" ad-theme="white"></ad>
		</view>
		<!-- #endif -->

		<!-- #ifdef MP-TOUTIAO -->
		<view class="ad" v-if="WEBCONFIG.douyin_video_status && WEBCONFIG.douyin_video_status == 1">
			<ad :unit-id="WEBCONFIG.douyin_video_ad_id" ad-theme="white"></ad>
		</view>
		<!-- #endif -->

	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { onLoad, onShow,onShareTimeline,onShareAppMessage,onUnload } from "@dcloudio/uni-app";
	import { $page, $http, $system, useStorage } from '@/utils';
	import { initAd } from '@/utils/ad'
	import { useUserStore, useWebConfigStore, useRefs } from "@/stores";
	const jumpList = ref([])
	const showJump = ref(false)
	const bannerList = ref()
	const beatAudioContext = uni.createInnerAudioContext()
	//流量主信息
	const webConfigStore = useWebConfigStore();
	const { WEBCONFIG } = useRefs(webConfigStore);
	let ad:any;
	onLoad((options : any) => {
		Login()
		getJump()
		getBanner()
		uni.$once('initConfig',()=>{
			ad = initAd();
		})
	})
	onUnload(() => {
		beatAudioContext.destroy();
	})
	onShow(() => {
		ad&&ad.showInterstitial().catch(() => { })
	})

	//用户登录
	const Login = () => {
		const { setUserInfo, clearUserInfo, hasLogin } = useUserStore();
		if (!hasLogin()) {
			const storage = useStorage()
			let appid = $system.appid()
			let puid = storage.get('PUID.' + appid) || 0
			// #ifdef MP-WEIXIN
			uni.login({
				provider: 'weixin',
				success: function (res) {
					$http.post('Login/login', { data: { pid: puid, type: 'weixin', code: res.code } }).then((result : any) => {
						setUserInfo(result.data).catch(() => { });
					})
				}
			})
			// #endif

			// #ifdef MP-TOUTIAO
			tt.login({
				success: function (res : any) {
					$http.post('Login/login', { data: { pid: puid, type: 'douyin', code: res.code } }).then((result : any) => {
						setUserInfo(result.data).catch(() => { });
					})
				}
			})
			// #endif

		}
	}
	// 获取轮播图
	const getBanner = () => {
		$http.get('Banner/getList').then(res => {
			bannerList.value = res.data
		})
	}
	//打开其他小程序
	const onJumpApplet = (item : any) => {
		// #ifdef MP-TOUTIAO
		tt.navigateToMiniProgram({
			appId: item.appid,
			path: item.path,
			fail(err : any) {
				uni.showModal({
					title: '错误提示',
					content: "跳转失败" + err.errMsg,
					showCancel: false
				})
			}
		})
		// #endif
		// #ifdef MP-WEIXIN
		wx.navigateToMiniProgram({
			appId: item.appid,
			path: item.path,
			shortLink: item.link,
			success(res) {
				console.log('成功', res)
			},
			fail(err : any) {
				uni.showModal({
					title: '错误提示',
					content: "跳转失败" + err.errMsg,
					showCancel: false
				})
			}
		})
		// #endif
	}
	//获取跳转列表
	const getJump = () => {
		// #ifdef MP-WEIXIN
		let types = 'weixin'
		// #endif
		// #ifdef MP-TOUTIAO
		let types = 'douyin'
		// #endif
		$http.get('Jump/getList', { data: { types: types } }).then(res => {
			jumpList.value = res.data
		})
	}
	
	const playAudio= (()=>{
		if (beatAudioContext.paused == false) {
			beatAudioContext.stop()
		} else {
			beatAudioContext.src = WEBCONFIG.value.audio.beat
			beatAudioContext.play()
		}
	})
	
	//分享
	onShareTimeline(()=>{
		return $page.shareTimeline({
			path:'/pages/index/index'
		})
	})
	
	onShareAppMessage(()=>{
		return $page.shareMessage({
			path:'/pages/index/index'
		})
	})
</script>


<style lang="scss" scoped>
	.container {
		min-height: 100vh;
        overflow-x: hidden;
		.header {
			background-repeat: no-repeat;
			background-size: 100% 700rpx;
			height: 746rpx;
			position: relative;

			.banner {
				position: absolute;
				left: 0px;
				bottom: 0px;
				width: 750rpx;
				height: 220rpx;

				.image {
					width: 686rpx;
					height: 218rpx;
				}
			}
		}


		.title {
			width: 336rpx;
			height: 116rpx;
		}

		.game-item {
			height: auto;

			.game-btn {
				width: 726rpx;
				height: 246rpx;
			}
		}
	}

	.jump-1 {
		position: fixed;
		top: 48vh;
		left: 0;
		height: 8vh;
		overflow: hidden;
		background-color: #fff;
	}

	.jump-applet::-webkit-scrollbar {
		width: 0px;
	}

	.jump {
		position: fixed;
		top: 30vh;
		left: 0;
		overflow: hidden;
		background-color: #fff;
	}

	.jump-applet {
		overflow: hidden;
		overflow-y: auto;
		max-height: 40vh;

		.jump-item {
			border: 2rpx solid #dadada;

			.item-image {
				width: 100rpx;
				height: 100rpx;
			}

			.item-text {
				width: 100rpx;
				text-align: center;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				font-size: 20rpx;
			}
		}
	}
</style>